<template>
  <div class="container">
    <el-card style="margin-top: 10px">
      <el-row type="flex" justify="space-between" align="middle">
        <el-form :inline="true">
          <el-form-item label-width="85px" label="关键字" size="small">
            <el-input
              placeholder="根据文章标题搜索"
              v-model.trim="page.keyword"
              @keydown.enter.native="searchBtn"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="100px" label="状态" size="small">
            <el-select placeholder="请选择" v-model="page.state">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clearBtn">清除</el-button>
            <el-button size="small" type="primary" @click="searchBtn"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end" style="margin-top: -20px">
          <el-button
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="showAddDialog = true"
            >新增技巧</el-button
          >
        </el-row>
      </el-row>

      <el-row>
        <el-alert
          :title="`数据一共 ${this.page.total} 条`"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
      </el-row>
      <el-row style="margin-top: 15px">
        <el-table
          v-loading="loading"
          :data="dataList"
          :header-cell-style="{ background: '#fafafa', color: '#6060266' }"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="180"
          />
          <el-table-column
            prop="title"
            label="文章标题"
            align="center"
            width="180"
          >
            <template slot-scope="{ row }">
              {{ row.title }}
              <i
                class="el-icon-film"
                style="color: #2918ff"
                v-if="row.videoURL"
                @click="playVideo(row.videoURL)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column
            prop="visits"
            label="阅读数"
            align="center"
            width="210"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="录入人"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column prop="createTime" label="录入时间" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.createTime | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            :formatter="formatStatus"
            align="center"
          >
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="previewBtn(row.id)"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleClick(row.id, row.state)"
                >{{ row.state === 1 ? "禁用" : "启用" }}</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="row.state === 0"
                @click="editBtn(row.id)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="row.state === 0"
                @click="deleteBtn(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-row type="flex" justify="center" style="margin-top: 15px">
        <PageTool
          type=""
          style="margin-top: 20px"
          :paginationPage="page.page"
          :paginationPagesize="page.pagesize"
          :total="page.total"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"
        ></PageTool>
      </el-row>
      <!-- /分页 -->
    </el-card>
    <!-- 预览弹层 -->
    <ArticlesPreview
      :showPreviewDialog.sync="showPreviewDialog"
      :articleId="articleId"
      ref="articlesPreview"
    ></ArticlesPreview>
    <!-- 增加弹层 -->
    <ArticlesAdd
      :showAddDialog.sync="showAddDialog"
      @addForm="getList"
      ref="articlesAdd"
    ></ArticlesAdd>
    <!-- 视频弹层 -->
    <div v-if="videoShow" class="showVideo">
      <video
        width="50%"
        autoplay="autoplay"
        controls="controls"
        loop="loop"
        :src="videourl"
      ></video>
      <div class="close el-icon-close" @click="close"></div>
    </div>
  </div>
</template>

<script>
// 题型枚举
import { status } from "@/api/hmmm/constants.js";
// 列表，删除，改变状态
import { list, remove, changeState } from "@/api/hmmm/articles";
// 分页组件
import PageTool from "../../module-manage/components/page-tool.vue";
// 预览组件
import ArticlesPreview from "../components/articles-preview.vue";
// 增加组件
import ArticlesAdd from "../components/articles-add.vue";

export default {
  components: {
    PageTool,
    ArticlesPreview,
    ArticlesAdd,
  },
  data() {
    return {
      showPreviewDialog: false, // 预览弹层
      showAddDialog: false, //增加弹层
      videoShow: false, //视频弹层
      loading: false,
      page: {
        page: 1, // 当前页码
        pagesize: 10,
        total: 10,
        keyword: "",
        state: null,
      },
      options: [
        {
          value: "1",
          label: "开启",
        },
        {
          value: "0",
          label: "关闭",
        },
      ],
      dataList: [], // 表单数据
      articleId: 0,
      videourl: null, //视频地址
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      this.loading = true;
      const { data } = await list(this.page);
      console.log(data);
      this.dataList = data.items;
      this.page.total = data.counts;
      this.loading = false;
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.page.pagesize = val;
      if (this.page.page === 1) {
        this.getList(this.page);
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.page.page = val;
      this.getList();
    },
    // 搜索
    searchBtn() {
      this.page.page = 1;
      this.getList(this.page);
    },
    // 清除
    clearBtn() {
      this.page.keyword = "";
    },
    // 删除组题列表
    async deleteBtn(id) {
      try {
        await this.$confirm("此操作将永久删除该文章, 是否继续？", "提示", {
          type: "warning",
        });
        await remove({ id });
        // 更新视图
        await this.getList();
        this.$message.success("删除文章成功");
      } catch (error) {
        console.log(error);
      }
    },
    // 禁用和启用
    async handleClick(id, state) {
      try {
        await this.$confirm("您确定要修改状态吗？", "提示", {
          type: "warning",
        });
        await changeState({ id, state: state ? "0" : "1" });
        this.$message.success("操作成功");
        this.getList();
      } catch (err) {
        console.log(err);
      }
    },
    formatStatus(row, column, cellValue, index) {
      const obj = status.find((item) => item.value * 1 === cellValue * 1);
      return obj ? obj.label : "未知";
    },
    // 预览
    previewBtn(id) {
      this.articleId = id;
      this.$refs.articlesPreview.getPreviewData(id);
      this.showPreviewDialog = true;
    },
    // 修改
    editBtn(id) {
      this.$refs.articlesAdd.editArticle(id);
      this.showAddDialog = true;
    },
    // 播放视频
    playVideo(videoURL) {
      this.videourl = videoURL;
      console.log(this.videourl);
      this.videoShow = true;
    },
    close() {
      this.videoShow = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.showVideo {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 100;
  video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 75%;
  }
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -25px;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    cursor: pointer;
    &::before {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 20px;
    }
  }
}
</style>
